<template>
  <div class="order_detail">
       <h4>{{info}}</h4>
       <div class="container" style="padding:0;">
           <!-- 订单详情 -->
           <div class="order_x" style="position:relative;">
               <h4>日供订单详情  
                    <el-button type="danger" plain style="float:right;margin-top:10px;margin-right:20px;"
                          @click="refund()" v-if="status == 1 || status == 2">退款</el-button>
               </h4>
               <div class="info">
                    <div>订单编号：{{orderInfo.orderId}}</div> 
               </div>
                <div class="info">
                    <div>规格：{{orderInfo.size}}</div> 
                    <div>单价：{{ orderInfo.unitPrice}}元/斤</div>
                    <div>总量：{{ orderInfo.caseWeight }} 斤</div>
               </div>
                <div class="info">
                    <div>买家：{{orderInfo.merchantName}}</div> 
                    <div>买家联系方式：{{orderInfo.merchantTel}}</div>
               </div>
               <div class="info">
                    <div>卖家：{{orderInfo.farmName}}</div> 
                    <div>卖家联系方式：{{orderInfo.farmerTel}}</div>
               </div>
               <hr style="height:2px;border:none;border-top:2px dotted #eee;"/>
               <div class="info">
                    <div style="color:blue;">物流编号：{{orderInfo.transNo}}</div> 
               </div>
               <div class="info">
                    <div>物流费：￥{{orderPrice.transFee}}</div> 
                    <div>物流费优惠：-￥{{ orderPrice.transFeeDis}}</div>
                     <div>服务费：￥{{ orderPrice.serviceFee }}</div> 
                     <div>服务费优惠：-￥{{ orderPrice.serviceFeeDis }}</div>
               </div>
               <div class="info">
                    <div>订单价格：￥{{orderPrice.orderPrice}}</div>
                    <div>供应商订单总金额：<span style="color:red">￥{{orderPrice.farmerTotalPrice}}</span></div>
                    <div>商家订单总金额：<span style="color:red">￥{{orderPrice.totalPrice}}</span></div>
                    <div><el-button  type="primary"  v-if="status == 2 && orderLog.receiveTime" @click="receipt()">确认收货</el-button>
                    </div>
               </div>
               <div class="info">订单备注：<span>123</span></div>
               <div class="firstOrder" v-if="isFirstOrder" style="position:absolute;right:20px;top:50px;">
                    <img src="../../../assets/首单.png" alt="" width="100">
               </div>
              
           </div>
           <!-- 收货信息 -->
           <div class="receivingInfo" style="padding-bottom:30px;">
               <h4>收货信息</h4>
               <div class="info">
                   <div>收货人：{{receiveAddress.receiveMan}}</div>
                   <div>收货电话：{{receiveAddress.receiveTel}}</div>
               </div>
               <div class="info">
                   <div style="width:100%;">收货地址：{{receiveAddress.receiveAddress}}</div>
               </div>
               <el-button  
               type="primary" style="margin-left:50px;" @click="editInfo()" v-if="status ==1">修改收货信息</el-button>
           </div>
           <!-- 运输站点 -->
           <div class="site" v-if="status != 1">
               <h4 style="color:blue;">运输站点</h4>
               <div class="info">
                   <div>出发站点：{{orderTransInfo.startSite}}</div>
                   <div>运输员：{{orderTransInfo.transUserName}}</div>
                   <div>运输员联系方式：{{orderTransInfo.transUserTel}}</div>
               </div>
               <div class="info">
                   <div>到达站点：{{orderTransInfo.receiveSite}}</div>
                   <div>配送员：{{orderTransInfo.deliveryUserName}}</div>
                   <div>配送员联系方式：{{orderTransInfo.deliveryUserTel}}</div>
               </div>
           </div>
           <!-- 订单日志 status == 0  -->
           <div class="order_log">
               <h4>订单日志</h4>
               <div class="info">
                   <div>下单时间：{{orderLog.addTime}}</div>
               </div>
               <div class="info" v-if="status == 2 || status == 3 || status == 4 || status == 6">
                   <div>发货时间：{{orderLog.sendTime}}</div>
               
               </div>
               <div class="info"  v-if="status == 2 || status == 3 || status == 4 || status == 6">
                   <div>配送时间：{{orderLog.deliveryTime}}</div>
               </div>
               <div class="info"  v-if="status == 2  || status == 6">
                   <div v-if="orderLog.receiveTime">送达时间：{{orderLog.receiveTime}}</div>
               </div>
               <div class="info"  v-if="status == 6">
                   <!-- <div v-if="orderLog.evaluateTime">退款时间{{orderLog.evaluateTime}}</div> -->
                   <div>退款时间：{{orderLog.evaluateTime}}</div>
               </div>
               <div class="info"  v-if="status == 3 || status == 4 || status == 6">
                   <!-- <div v-if="orderLog.qtTime">签收时间：{{orderLog.qtTime}}</div>
                   <div v-if="orderLog.qtTime">签收人：{{orderLog.receiveMan}}</div> -->
                   <div >签收时间：{{orderLog.qtTime}}</div>
                   <div >签收人：{{orderLog.receiveMan}}</div>
               </div>
               
                <div class="info"  v-if="status == 4 || status == 6">
                   <div v-if="orderLog.evaluateTime">评价时间：{{orderLog.evaluateTime}}</div>
               </div>
               
               <!-- <div class="info"  v-if="status == 4 || status == 6">
                   <div v-if="orderLog.evaluateTime">评价时间：{{orderLog.evaluateTime}}</div>
               </div> -->
           </div>
           <!-- 评价信息 -->
           <div class="evaluate_info"  v-if="status == 3 || status == 4">
               <h4>评价信息</h4>
               <div class="info" v-if="status == 3">
                   <div>等待买家评价</div>
               </div>
               <div class="info" v-if="status == 4">
                   <div style="width:100%;display:flex;">评价分值:
                          <el-rate
                                v-model="orderEvaluate.stars"
                                disabled
                                text-color="#ff9900"
                                :colors="['red', 'red', 'red']"
                                score-template="{value}" style="margin-top:10px;margin-left:10px;">
                        </el-rate>
                   </div>
                   <div class="width:100%;"></div>
                   <div class="width:100%;"></div>
               </div>
               <div class="info" v-if="status == 4">
                   <div style="width:100%;">评价内容：{{orderEvaluate.content}}</div>
               </div>
               <div class="info" v-if="status == 4">
                   评价图片:
                    <ul style="display:flex;" class="imgBox">
                       <li v-for="item in  orderEvaluate.photoUrlArray" :key="item.id">
                           <img  :src="item" @click="clickImg($event)">
                       </li>
                      
                   </ul>
                   <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
               </div>
           </div>
           <!-- 已退款信息 -->
           <div class="refund" v-if="status == 6">
               <h4>已退款</h4>
               <div class="info">
                   <div>退款时间：{{orderRefundInfo.addTime}}</div>
                   <div>供应端实际收入：{{orderRefundInfo.farmerIncome}}</div>
                   <div>商户端实际退款：{{orderRefundInfo.merchantRefund}}</div>
               </div>
                <div class="info">
                   <div>订单退款金额：<span style="color:red;">￥{{orderRefundInfo.orderReFund}}</span></div>
                   <div>物流费退款金额：<span style="color:red;">￥</span>{{orderRefundInfo.transFeeReFund}}</div>
                   <!-- <div>服务费退款金额：<span style="color:red;">￥{{orderRefundInfo.serviceFeeReFund}}</span></div> -->
               </div>
                <div class="info">
                   <div>退款说明：   {{orderRefundInfo.reFundNote}}</div>
               </div>
           </div>
       </div>
       <!-- 修改收货信息的弹框 -->
       <el-dialog title="修改收货信息" :visible.sync="dialogFormVisible" width="40%">
            <el-form  :model="receivingInfo" :rules="rules" ref="receivingInfo">
                <el-form-item prop="name" label="收货人" :label-width="formLabelWidth">
                      <el-input v-model="receivingInfo.name" auto-complete="off" class="input-item"> </el-input>
                </el-form-item>
                <el-form-item prop="tel" label="收货电话" :label-width="formLabelWidth">
                      <el-input v-model="receivingInfo.tel" auto-complete="off" class="input-item"></el-input>
                </el-form-item>
                <el-form-item prop="selected" label="地区选择" :label-width="formLabelWidth">
                     <area-select :level="2" v-model="receivingInfo.selected"  :data="$pcaa" ></area-select> 
                </el-form-item>
                <el-form-item prop="address" label="详细地址" :label-width="formLabelWidth">
                      <el-input v-model="receivingInfo.address" auto-complete="off" class="input-item"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateAdress('receivingInfo')">确 定</el-button>
            </div>
       </el-dialog>
       <!-- 退款弹框 -->
       <el-dialog title="退款信息" :visible.sync="refundModel" width="30%">
            <el-form  :model="refundInfo" :rules="rules" ref="refundInfo">
                <el-form-item prop="refundMoney" label="订单退款金额" :label-width="formLabelWidth">
                      <el-input v-model="refundInfo.refundMoney" auto-complete="off" class="input-item"> </el-input>
                </el-form-item>
                <el-form-item prop="refundwlMoney" label="物流费退款" :label-width="formLabelWidth">
                      <el-input v-model="refundInfo.refundwlMoney" auto-complete="off" class="input-item"> </el-input>
                </el-form-item>
                <el-form-item prop="refundfwMoney" label="服务费退款" :label-width="formLabelWidth">
                      <el-input v-model="refundInfo.refundfwMoney" auto-complete="off" class="input-item"> </el-input>
                </el-form-item>
                <el-form-item prop="refundReason" label="退款说明" :label-width="formLabelWidth">
                      <el-input type="textarea" v-model="refundInfo.refundReason" auto-complete="off" class="input-item"> </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="refundModel = false">取 消</el-button>
                <el-button type="primary" @click="refundSave('refundInfo')">确 定</el-button>
            </div>
       </el-dialog>  
  </div>
</template>

<script>
import BigImg from '@/components/page/order/bigImg/BigImg.vue';
import { order_detail,update_adress,refundOpreate,makeReceive,getRundMoney } from '@/request/api'
import { AreaSelect } from "vue-area-linkage";
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        var checkrefundMoney = (rule,value,callback) => {
          
            getRundMoney({
                orderFarmerId:this.$route.params.id
            }).then(res => {
                 console.log(res);
                 this.roundMoney = res.data.orderPrice;
                 if( value > this.roundMoney ){
                    callback(new Error('退款金额超出订单金额'));
                 }else {
                    callback()
                 }
            })
            
        };
        var refundwlMoney = (rule,value,callback)  => {
            let wlMoney = this.orderPrice.transFee - this.orderPrice.transFeeDis;
            if( value > wlMoney  ) {
                  callback(new Error('退款物流金额超出订单物流金额'));
            }else {
                 callback()
            }
        }
        var refundfwMoney = (rule,value,callback)  => {
            let wlMoney = this.orderPrice.serviceFee - this.orderPrice.serviceFeeDis;
            if( value > wlMoney  ) {
                  callback(new Error('退款服务费金额超出订单服务费金额'));
            }else {
                 callback()
            }
        }
        return {
            isFirstOrder:0,
            roundMoney:'',
            status:'',
            info:'',
            dialogFormVisible:false,
            receivingInfo:{
               id:'',
               name:'',
               tel:'',
               address:'',
               selected:[]
            },
            formLabelWidth: '120px',
            showImg:false,
            imgSrc: '',
            value5: 3,
            orderInfo:{},  // 订单详情
            orderPrice:{}, // fee
            receiveAddress:{}, // 收货信息
            orderTransInfo:{}, // 站点信息
            orderLog:{}, // 订单日志
            orderEvaluate:{}, // 评价信息
            orderRefundInfo:{}, // 退款信息
            rules:{
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    { validator: checkBlank, trigger: 'blur' },
                    
                ],
                address: [
                    { required: true, message: '详细地址不能为空', trigger: 'change' },
                    { validator: checkBlank, trigger: 'blur' }
                ],
                tel: [
                    {  required: true, message: '手机号不能为空', trigger: 'change' },
                    { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, message: '手机号格式不对', trigger: 'blur'}
                ],
                selected: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                refundMoney: [
                     { required: true, message: '退款金额不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' },
                      {validator:checkrefundMoney,trigger:'blur'},
                      {pattern:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,message :'请输入合法金额',trigger:'blur'}
                ],
                refundwlMoney:[
                     { validator: checkBlank, trigger: 'blur' },
                      {validator:refundwlMoney,trigger:'blur'},
                      {pattern:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,message :'请输入合法金额',trigger:'blur'}                    
                ],
                refundfwMoney:[
                      { validator: checkBlank, trigger: 'blur' },
                       {validator:refundfwMoney,trigger:'blur'},
                      {pattern:/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,message :'请输入合法金额',trigger:'blur'}                                        
                ]
               
            },
            refundModel:false, // 退款弹框  
            refundInfo:{
                // 退款信息
                refundMoney:'', // 退款金额
                refundwlMoney:'', // 退款物流费
                refundfwMoney:'', // 服务费退款
                refundReason:'' // 退款说明
            }
        }
    },
    created(){
        this.getDetail();
    },
    components:{
       'big-img':BigImg ,
        AreaSelect
    },
    methods:{
        receipt(){ // 确认收货\
            let id = this.$route.params.id;
            this.$confirm('确认收货吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                makeReceive({
                    orderFarmerId:id
                }).then(res => {
                     console.log(res);
                     if(res.code ==1) {
                        this.$message({
                            type: 'success',
                            message: '收货成功'
                        });
                         this.getDetail();
                     }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消收货'
                });          
            });
        },
        refund(){
           //  退款 
            this.refundModel = true;
        },
        refundSave(formName) {
            this.$refs[formName].validate( (valid) => {
               if(valid) {
                    refundOpreate({
                        orderFarmerId:this.$route.params.id,
                        orderReFund:this.refundInfo.refundMoney,
                        transFeeReFund:this.refundInfo.refundwlMoney,
                        serviceFeeReFund:this.refundInfo.refundfwMoney,
                        reFundNote:this.refundInfo.refundReason
                    }).then(res => {
                        console.log(res);
                        if(res.code == 1) {
                                this.$message({
                                    type: 'success',
                                    message: '退款成功'
                                });
                                this.refundModel = false;
                                this.refundInfo.refundMoney = '';
                                this.refundInfo.refundwlMoney = '';
                                this.refundInfo.refundfwMoney = '';
                                this.refundInfo.refundReason = '';
                                this.getDetail();
                        }
                    })
               }
            })
        },
        editInfo(){
            this.dialogFormVisible = true;
            this.receivingInfo.name = this.receiveAddress.receiveMan;
            this.receivingInfo.tel =  this.receiveAddress.receiveTel;
            let provinceId = this.receiveAddress.provinceId.toString();
            let cityId = this.receiveAddress.cityId.toString();
            let districtId = this.receiveAddress.districtId.toString();
            this.receivingInfo.selected = [ provinceId,cityId,districtId ];
            console.log(this.receivingInfo.selected);
            this.receivingInfo.address = this.receiveAddress.address;
            this.receivingInfo.id = this.receiveAddress.id;
        },
        clickImg(e) {
                this.showImg = true;
                // 获取当前图片地址
                this.imgSrc = e.currentTarget.src;
        },
        viewImg(){
            this.showImg = false;
        },
        getDetail(){
            // 获取订单详情数据
            order_detail({
                orderFarmerId:this.$route.params.id
            }).then(res => {
                console.log(res);
                this.isFirstOrder = res.isFirstOrder;
                this.orderInfo = res.orderInfo;
                this.status = this.orderInfo.status;
                this.orderPrice = res.orderPrice;
                this.receiveAddress = res.receiveAddress;
                this.orderLog = res.orderLog;
                this.orderTransInfo = res.orderTransInfo;
                this.orderEvaluate = res.orderEvaluate;
                this.orderRefundInfo= res.orderRefundInfo;
                if(this.status == 0){
                    this.info = '待处理订单>订单详情';
                }else if(this.status == 1) {
                    this.info = '待发货订单>订单详情';
                }else if(this.status == 2) {
                    this.info = '待收货订单>订单详情';
                }else if(this.status == 3) {
                    this.info = '待评价订单>订单详情';
                }else if(this.status == 4) {
                    this.info = '已完成订单>订单详情';
                }else if(this.status == 6) {
                    this.info = '已退款订单>订单详情';
                }
            })
        },
        updateAdress(formName){
             // 修改地址
              this.$refs[formName].validate(valid => {
                   if(valid) {
                       console.log(this.receivingInfo.selected)
                        update_adress({
                            id:this.receivingInfo.id,
                            orderFarmerId:this.$route.params.id,
                            provinceId:this.receivingInfo.selected[0],
                            cityId:this.receivingInfo.selected[1],
                            districtId:this.receivingInfo.selected[2],
                            address:this.receivingInfo.address,
                            receiveMan:this.receivingInfo.name,
                            receiveTel:this.receivingInfo.tel
                        }).then(res => {
                             console.log(res);
                             if(res.code == 1){
                                   this.$message({
                                        type: 'success',
                                        message: '修改成功'
                                    });
                                     this.getDetail();
                             }
                        })
                        this.dialogFormVisible = false;

                   }
              })
            

        }

    }

 }
</script>
<style  scoped>
.order_detail > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container {
    line-height: 40px;
}

.container .info {
    display: flex;
    padding: 0  50px;
}
.container .info div {
    width: 360px;
    
}
.input-item {
    width: 300px;
}
.site_info ul li {
    margin: 4px;
}
.site_info img {
    width:120px;
    height: 120px;
}
.imgBox img {
    width:120px;
    height: 120px; 
}
.imgBox li {
    margin: 4px;
}
</style>